<template>
	<z-paging ref="paging" v-model="cardList" show-refresher-update-time @query="queryList" :auto="false"
		:refresherEnabled="false" :loading-more-enabled="false">

		<template #top>
			<view :style="{'backgroundColor':bgcolor}" id="header">
				<view :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
					<view class="d-flex d-flex-middle d-flex-between pl-3 pr-1 mb-2">
						<view class="d-flex d-flex-middle mr-2" @click="position">
							<text class="iconfont font30 icon-dingwei colorblue mr"></text>
							<text
								class="color71 font24">{{$store.state.user.locatedCity?$store.state.user.locatedCity:city}}(切换)</text>
						</view>
						<view class="d-flex-item srch d-flex d-flex-middle pl-2" @click="gotoSearchPage">
							<text class="iconfont icon-sousuo colorblue"></text>
							<text class="colorhold font24 ml-1">请输入关键字</text>
						</view>
					</view>
				</view>

				<!-- <view class="d-flex d-flex-middle d-flex-between mt-3 mb-4">
					<swiper class="d-flex-item" style="height: 82rpx;">
						<swiper-item>
							<view class="d-flex-item d-flex d-flex-middle d-flex-between mx-2">
								<image class="avatarImg" :class="{'avatarImgCur':gameindex == 999}"
									@click="changGame(999,0)"
									:src="$store.state.isRecomend?'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/icon.png':'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/hotIcon.png'"
									style="width: 70rpx;height: 70rpx;border-radius: 20rpx;"></image>
								<image class="avatarImg" :class="{'avatarImgCur':gameindex == aindex}"
									v-for="(avalist,aindex) in avatarList" :key="aindex" :src="avalist.icon"
									@click="changGame(aindex,avalist.id)"
									style="width: 70rpx;height: 70rpx;border-radius: 20rpx;"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="pr-2 d-flex d-flex-middle" @click="next" style="height: 82rpx;">
						<text class="iconfont icon-right-circle-copy"></text>
					</view>
				</view> -->
				
				<view class="d-flex d-flex-middle d-flex-between mt-3 mb-2">
					<view class="d-flex w-100" style="overflow-x: scroll;">
						<view class="d-flex-item d-flex d-flex-middle d-flex-between mx-2" style="overflow: scroll;">
							<view class="tab-item" :class="{'font-bold':gameindex == 999}"
								@click="changGame(999,0)">全部</view>
							<view class="tab-item" :class="{'font-bold':gameindex == aindex}"
								v-for="(avalist,aindex) in avatarList" :key="aindex"
								@click="changGame(aindex,avalist.id)">{{avalist.name}}</view>
						</view>
						<view class="pr-2 d-flex d-flex-middle" @click="next" style="height: 82rpx;">
							<text class="iconfont icon-right-circle-copy"></text>
						</view>
					</view>
				</view>
			</view>

		</template>

		<template #empty>
			<view class="w-100">
				<view class="px-2 pb-6">
					<view class="rounded30" style="background-color: #C0ECF5;padding: 80rpx 60rpx">
						<view class="text-center colorfff font-bold mb-4" style="font-size: 80rpx;">遇见新嗒子</view>
						<view class="colorfff text-center mb-7" style="font-size: 38rpx;">这个游戏的搭子太少啦，为您推荐了其他游戏的新搭子在后面
						</view>
						<view class="d-flex d-flex-center mb-10">
							<image
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241226173137-085ee193-36cf-44b4-b5d3-2f489099207f.png"
								mode="heightFix" style="widht:480rpx;height: 380rpx;"></image>
						</view>
						<view class="d-flex d-flex-center">
							<view class="rounded60 d-flex d-flex-center d-flex-middle"
								style="width: 580rpx;height: 80rpx;background-color: rgba(0,0,0,.24);"
								@click="goCommand">
								<text class="colorfff font36 font-bold">知道了</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<view class="tantan-slide" :style="{width: winWidth + 'px',height: winHeigh + 'px'}" v-show="cardList.length != 0">
			<view @touchstart.capture="touchStart($event,cardCurrentIndex)"
				@touchmove.stop.capture="touchMove($event,cardCurrentIndex)"
				@touchend.capture="touchEnd(cardCurrentIndex)" class="tantan-slide-box">
				<template v-for="(item, index) in cardList" :key="item.id">
					<view class="tantan-slide-box-item" :key="index" v-if="cardCurrentIndex + visible >= index"
						@click.stop="clickImage" :style="[cardTransform(item, index)]">
						<!-- 加载图片会闪屏 双if避免 -->
						<template v-if="cardCurrentIndex + visible >= index && cardCurrentIndex <= index">
							<view class="rounded30 w-100" :id="'content-wrap' + index" v-if="item" style="background: #c2edf4;">
								<view class="pl-2 pt-2 pr-2 pb-1 d-flex d-flex-between d-flex-middle">
									<view class="d-flex d-flex-middle">
										<image class="rounded" :src="item.gameAvatar"
											style="width: 70rpx;height: 70rpx;">
										</image>
										<view class="ml-1-5 d-flex d-flex-middle">
											<text class="font32 font-bold colorblack">{{item.gameName}}</text>
											<text class="font22 ml-1 colorblack">已有{{Number(item.releaseCount) >= 100? '1W+' : '999+'}}人发布</text>
										</view>
									</view>
									<text class="iconfont icon-gengduo1 font32 morecolor"
										@click="openMorePopup(item)"></text>
								</view>
								<view class="font36 font-bold px-3 mb-1 text-clamp-two colorblack" style="line-height: 45rpx;">
									{{item.remark}}
								</view>
								<view class="pl mb-1">
									<swiper class="swiper" circular :autoplay="true" :indicator-dots="true"
										:interval="interval" style="height: 280rpx;">
										<swiper-item v-if="item.screenshot1 && item.screenshot1.startsWith('http')">
											<view class="swiper-item" style="width: 90%; margin: 0 auto;"
												@click="previwImage(index,0)">
												<image class="rounded30 img1" :src="item.screenshot1" mode="aspectFill">
												</image>
											</view>
										</swiper-item>
										<swiper-item v-if="item.screenshot2 && item.screenshot2.startsWith('http')"
											@click="previwImage(index,1)">
											<view class="swiper-item" style="width: 90%; margin: 0 auto;">
												<image class="rounded30 img1" :src="item.screenshot2" mode="aspectFill">
												</image>
											</view>
										</swiper-item>
										<swiper-item v-if="item.screenshot3 && item.screenshot3.startsWith('http')"
											@click="previwImage(index,2)">
											<view class="swiper-item" style="width: 90%; margin: 0 auto;">
												<image class="rounded30 img1" :src="item.screenshot3" mode="aspectFill">
												</image>
											</view>
										</swiper-item>
									</swiper>
								</view>

								<view class="px-2">
									<view class="px-2 py-2 d-flex d-flex-wrap bg-f5 rounded20 mb-1">
										<view v-if="item.makeFriendsId" v-for="name in item.makeFriends.split(',')"
											:key="name" class="i-item-box">{{name}}</view>
										<view v-if="item.gameLevelId"  class="i-item-box">{{item.gameLevelName}}</view>
										
										<view v-if="item.districtServerId"
											v-for="name in item.districtServer.split(',')" :key="name"
											 class="i-item-box">{{name}}</view>
										<view v-if="item.onlineTimeId" v-for="name in item.onlineTime.split(',')"
											:key="name" class="i-item-box">{{name}}</view>
										<view v-if="item.playerStyleId" class="i-item-box">{{item.playerStyle}}</view>
									</view>

									<view class="px-2 py-2 d-flex d-flex-middle bg-f5 rounded20 mb-1 hidden">
										<view class="mr-6 d-flex d-flex-center d-flex-middle" style="width: 120px; height: 120px;">
											<view class="charts-box">
												<!-- <qiun-data-charts type="radar" :opts="opts" :chartData="getChartData(item.extra)" /> -->
												<canvas :canvas-id="'radarCanvas'+index" id="radarCanvas" style="width: 120px; height: 120px;"></canvas>
											</view>
										</view>

										<view class="d-flex-item d-flex d-flex-column">
											<view>
												<text class="font34 font-bold colorblack mr" v-if="item.abilityTopic">{{item.abilityTopic}}</text>
												<view class="color71 font36 font-bold" v-else>荣誉之王</view>
											</view>
											<view class="font26 color71 mt text-clamp-three" v-if="item.playerAbilityReport">
												{{item.playerAbilityReport}}
											</view>
										</view>
									</view>


									<view class="px-2 py-2 bg-f5 rounded20">
										<view class="d-flex">
											<view class="avatar-container" @click="user(item.uid)">
												<image class="user-avatar" :src="item.avatar" mode="aspectFill">
												</image>
												<image v-if="item.dressedVoMap && item.dressedVoMap['1']"
													class="avatar-frame" :src="item.dressedVoMap['1'].icon"></image>
											</view>

											<view class="position-relative" style=" left: 40rpx;">
												<view class="mb d-flex d-flex-middle">
													<text class="font30 mr-1 color000 text-ellipsis" style="white-space: nowrap; max-width: 150rpx; color: #000;">{{item.nickname}}</text>
													<view class="d-flex d-flex-middle mr" v-if="item.onlineStatus==1">
														<text class="iconfont icon-dian1" style="color: #28a745;"></text>
													</view>
													
													<view class="d-flex-btn rounded30" :style="{background: item.gender==1? '#61BAFF' : '#FDA4E3'}" style="padding: 4rpx 15rpx;">
														<image :src="item.gender==1? 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/male.png' : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/female.png'" style="width: 20rpx; height: 20rpx;"></image>
														<view class="ml-1 colorfff font22">24</view>
													</view>

													<view class="d-flex position-relative ml-1" style="">
														<image v-if="item.accountType==2"
															src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/svip-y.png"
															style="    width: 88rpx;height: 32rpx;"></image>
														<image v-if="item.accountType==3"
															src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E5%B1%82%207%402x.png"
															style="    width: 88rpx;height: 32rpx;"></image>
														<view v-if="item.accountType==1"
															style="width: 88rpx; height: 32rpx;">
														</view>
													</view>

												</view>
												<view v-if="item.gameLevelId" class="color999 font20 mb">
													段位要求:{{item.gameLevelName}}</view>
												<view v-if="item.makeFriendsId" class="color999 font20">
													想找:{{item.makeFriends}}
												</view>
											</view>
											<view v-if="item.personalityType"
												class="d-flex-item d-flex d-flex-center d-flex-column d-flex-middle">
												<image class="rounded"
													src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/a2.png"
													style="width: 90rpx;height: 90rpx;"></image>
												<text class="mt font20 color000">{{item.personalityType}}</text>
											</view>
										</view>
										<view class="d-flex d-flex-between mt-2">
											<view class="d-flex d-flex-middle d-flex-center btn-bg rounded40"
												style="width: 280rpx; height: 60rpx;"
												@click.stop="item.concernFlag ? null : concern(item.uid,item.concernFlag,index)">
												<text class="colorfff">{{item.concernFlag?"已关注":"关注"}}</text>
											</view>

											<view class="d-flex d-flex-middle d-flex-center btn-bg rounded40"
												@click="toda(item.id, index)"
												style="width: 280rpx; height: 60rpx;">
												<text class="colorfff">嗒一嗒</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</template>
			</view>
		</view>
		
		<view class="fab" @click="publish">
			<text class="colorfff">发布</text>
		</view>
		
		<view 
			class="RemindPublish d-flex d-flex-between d-flex-middle position-fixed bottom-0" 
			v-show="ShowPublishTips"
			style="left: 50%; transform: translateX(-50%);"
		>
			<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png" class="ml-4 mr-2" style="width: 60rpx; height: 60rpx;"></image>
			<text class="colorfff d-flex-item">发布搭子卡，更快匹配搭子</text>
			<view class="d-flex-btn px-3 py-1 rounded20 bg-fff mr-2" style="color: #2eebfc;" @click="publish">立即发布</view>
			<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/close-fff.png" @click="ClosePublishTips" class="mr-3" style="width: 25rpx; height: 25rpx;"></image>
		</view>

		<!-- 首充活动 -->
		<view class="firstChangeBox position-fixed top-0 right-0 left-0 bottom-0 z-index-1000"
			style="background: rgba(0, 0, 0, .6);" :style="{display: firstChangeDisplay}">
			<view class="firstChange firstChangeSty" v-if="!isPurchase">
				<view class="position-absolute colorfff font-bold w-100 text-center font26" style="top: 149rpx;">
					前2笔充值附赠开宝盒机会</view>
				<view @click="openRealDesc" class="position-absolute colorfff font22 mr-4 left-0"
					style="top: 176rpx; margin-left: 490rpx; width: 100rpx; opacity: 0;">规则说明</view>
				<view class="position-absolute d-flex colorfff font-bold font32"
					style="top: 215rpx; width: 535rpx; margin-left: 52rpx;">
					<view @click="changeChangeIndex(0)"
						:class="['text-center',firstChangeIndex ===0? 'currentChange' : '']"
						style="height: 50rpx; line-height: 50rpx; width: 32%;">12元</view>
					<view @click="changeChangeIndex(1)"
						:class="['text-center',firstChangeIndex ===1? 'currentChange' : '']"
						style="height: 50rpx; line-height: 50rpx; width: 32%;">68元</view>
					<view @click="changeChangeIndex(2)"
						:class="['text-center',firstChangeIndex ===2? 'currentChange' : '']"
						style="height: 50rpx; line-height: 50rpx; width: 32%;">188元</view>
				</view>
				<view class="position-relative d-flex" style="top: 340rpx; margin-left: 52rpx;"
					v-if="showRechargeRewards">
					<view class="firstChangeItemSty position-relative">
						<image class="ml-3 mt-3"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png"
							style="width: 60rpx; height: 60rpx;"></image>
						<view class="position-absolute colorfff font20 text-center" style="bottom: 2rpx; width: 100%;">
							{{RechargeRewards.coinPackageVo.name}}
						</view>
					</view>
					<view v-for="i in RechargeRewards.rewardList" :key="i.id">
						<view class="firstChangeItemSty position-relative" v-if="i.rewardType !== 4">
							<image v-if="i.rewardType===2 || i.rewardType===14" :src="i.rewardIcon"
								:class="[i.rewardType===14? 'ml-2 mt-2' : '']"
								:style="[{width: i.rewardType===2? '120rpx' : '80rpx'},{height: i.rewardType===2? '120rpx' : '80rpx'}]">
							</image>
							<image v-if="i.rewardType===6" class="ml-3 mt-3"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/vip.png"
								style="width: 60rpx; height: 60rpx;"></image>
							<image v-if="i.rewardType===7" class="ml-3 mt-3"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/svip.png"
								style="width: 60rpx; height: 60rpx;"></image>
							<view v-if="i.rewardType===2 || i.rewardType===14"
								class="triangle colorfff position-absolute font22">×{{i.rewardCount}}</view>
							<view class="position-absolute colorfff font20 text-center"
								style="bottom: 2rpx; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;">
								{{i.rewardName}}
							</view>
						</view>
					</view>
				</view>
				<view class="position-absolute colorfff d-flex d-flex-bottom" style="bottom: 505rpx; left: 52rpx;">
					<view class="font28 font-bold" style="transform: skewX(-10deg);">附赠{{CouponsNum}}张宝盒券</view>
					<view class="font22 font-bold">(开宝盒几率得以下奖励)</view>
				</view>
				<view class="position-absolute"
					style="bottom: 150rpx; left: 50%; transform: translateX(-50%); width: 545rpx; height: 360rpx; overflow: scroll;">
					<view class="d-flex d-flex-wrap" style="width: 615rpx; margin-left: 12rpx;">
						<view class="firstChangeItemSty2 position-relative"
							v-for="i in RechargeRewards.attachRewardList" :key="i.id">
							<image v-if="i.rewardType===2 || i.rewardType===14" :src="i.rewardIcon"
								style="width: 110rpx; height: 110rpx; margin-left: 15rpx;"></image>
							<image v-if="i.rewardType===6" class="ml-4 mt-3"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/vip.png"
								style="width: 60rpx; height: 60rpx;"></image>
							<image v-if="i.rewardType===7" class="ml-4 mt-3"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/svip.png"
								style="width: 60rpx; height: 60rpx;"></image>
							<image v-if="i.rewardType===3" class="ml-4 mt-3"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201941.png"
								style="width: 60rpx; height: 60rpx;"></image>
							<image v-if="i.rewardType===9" class="ml-4 mt-3"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0219161950.png"
								style="width: 60rpx; height: 60rpx;"></image>
							<view v-if="i.rewardType===2 || i.rewardType===9"
								class="triangle colorfff position-absolute font22">×{{i.rewardCount}}</view>
							<view class="position-absolute colorfff font22 text-center"
								style="bottom: 2rpx; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;">
								{{i.rewardName}}
							</view>
						</view>
					</view>
				</view>
				<view class="position-absolute colorfff text-center font22 w-100" style="bottom: 115rpx;">
					本次活动由官方举办，请理性消费，适当娱乐</view>
				<view class="position-absolute font40 pb-3" style="bottom: 6rpx; right: 240rpx;" @click="confirm">
					<view class="colorfff font-bold d-flex-btn w-100"
						style="text-shadow: 0px 3px 2px #cf1b61; letter-spacing: 2px;">{{PayMount}}元抢购</view>
				</view>
				<view @click="closeFirstChangePopup" class="position-absolute"
					style="left: 50%; transform: translateX(-50%); bottom: -90rpx;">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/close-white.png"
						style="width: 50rpx; height: 50rpx;"></image>
				</view>
			</view>
		</view>

		<view v-if="RealDescDisplay" class="position-fixed top-0 left-0 right-0 bottom-0"
			style="background: rgba(0, 0, 0, .6); z-index: 1001;">
			<view class="RealDesc position-relative rounded15">
				<view class="d-flex mb-2 d-flex-middle">
					<view class="colorfff font30 text-center mt-2" style="flex: 1; margin-left: 65rpx;">规则说明</view>
					<view class="mr-2 mt-2" @click="closeRealDesc">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/close-white.png"
							style="width: 45rpx; height: 45rpx;"></image>
					</view>
				</view>
				<view class="font24 px-2 pb-2" style="color: #f9f6fe; overflow: scroll; height: 630rpx;">
					<view class="mb-1" v-for="i in RealDescList" :key="i.id">{{i}}</view>
				</view>
			</view>
		</view>

		<uni-popup ref="purchasePopup" background-color="#fff" border-radius="10px 10px 0 0"
			style="z-index: 999999; position: relative;">
			<radio-group class="PayOptions d-flex-between pt-2" v-for="(item, index) in PayList" :key="item.id"
				@change="ChangePayOpt(index)">
				<label class="d-flex d-flex-middle d-flex-between">
					<view class="icon">
						<image :src="item.icon"></image>
					</view>
					<view class="option mr-1" style="margin-bottom: 4rpx;">{{item.name}}</view>
					<view v-if="item.desc" class="font22 px-3 rounded10"
						style="color: #FF9645; background: #f9e7c9; margin-bottom: 2px;">{{item.desc}}</view>
				</label>
				<radio :value="index" :checked="item.checked" style="transform:scale(0.6);"></radio>
			</radio-group>
			<view class="btn ml-2 colorfff linerbg" style="width: 75%;" @click="purchase">立即以{{PayMount}}元抢购</view>
		</uni-popup>
		
		<uni-popup ref="dayidaPopup" @change="dayidachangestatus" background-color="#b4dbf4" border-radius="20px 20px 0 0" style="z-index: 999999;">
			<view class="d-flex" style="width: 2250rpx; transition: transform .3s ease;" :style="[{transform: 'translateX('+DicX+'rpx)'}]">
				<view class="d-flex d-flex-column" style="width: 750rpx;">
					<view class="d-flex d-flex-between pt-2">
						<view class="d-flex-item font40 font-bold text-center my-2" style="color: #061270; margin-left: 80rpx;">嗒一嗒成功</view>
						<image @click="closedayidaPopup" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/closebtn-w.png" class="mr-2" style="width: 60rpx; height: 60rpx;"></image>
					</view>
					<view class="">
						
					</view>
					<view class="position-relative d-flex-btn w-100 d-flex-item" style="height: 260rpx;">
						<view :class="['d-flex', 'd-flex-middle', 'position-absolute', isDayida? 'showLeft' : '']" style="left: -50%; transition: transform .8s ease;">
							<image class="mx-2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/dayida-right.png" style="width: 80rpx; height: 260rpx;"></image>
							<image class="rounded" :src="dayidaData.avatar" style="width: 180rpx; height: 180rpx;"></image>
						</view>
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/dayidaaixin.png" :class="['mb-10', isDayida? 'showAixin' : '']" style="width: 80rpx; height: 75rpx; transition: transform 0.5s ease;"></image>
						<view :class="['d-flex', 'd-flex-middle', 'position-absolute', isDayida? 'showRight' : '']" style="right: -50%; transition: transform .8s ease;">
							<image class="rounded" :src="$store.state.user.avatar" style="width: 180rpx; height: 180rpx;"></image>
							<image class="mx-2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/dayida-left.png" style="width: 80rpx; height: 260rpx;"></image>
						</view>
					</view>
					<view @click="GoChat" class="btn ml-2 colorfff dayida-btn-bg font34 font-bold" style="width: 45%;">去聊天</view>
				</view>
				<view style="width: 750rpx;">
					<view class="d-flex mt-2">
						<image :src="dayidaData.avatar" class="rounded ml-5 mr-2" style="width: 120rpx; height: 120rpx;"></image>
						<view class="d-flex-column d-flex-center">
							<view class="font36 font-bold" style="color: #061270;">和我一起来聊天吧</view>
							<view class="font26 mt-1" style="color: #061270;">特别的礼物送给特别的人，解锁聊天框</view>
						</view>
					</view>
					<view class="d-flex d-flex-wrap" style="width: 700rpx; margin: 40rpx auto 20rpx;">
						<view 
							:class="['dayidaGiftItem', 'mb-2', 'position-relative', (dex+1)%4==0? '' : 'mr-2']" 
							v-for="(i, dex) in dayidaGiftList" :key="i.id"
							@click="selectDayidaGift(dex)"
						>
							<view class="position-absolute" style="top: 3rpx; right: 15rpx;">
								<image :src="i.selected? 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/select.png' : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/no-select.png'" style="width: 30rpx; height: 30rpx;"></image>
							</view>
							<view class="position-absolute top-0 left-0 d-flex-btn" style="width: 160rpx; height: 160rpx;">
								<image :src="i.icon" style="width: 75rpx; height: 75rpx;"></image>
							</view>
							<view class="position-absolute bottom-0 w-100 colorfff font24 text-center mb-1">{{i.name}}</view>
						</view>
					</view>
					<view class="d-flex d-flex-between d-flex-around">
						<view @click="gotomember" class="text-center rounded40 colorfff dayida-btn-bg font34 font-bold" style="width: 42%; margin: 0 auto 20rpx; padding: 18rpx 0;">VIP 直接聊</view>
						<view @click="GiveDayidaGift" class="text-center rounded40 colorfff dayida-btn-bg font34 font-bold" style="width: 42%; margin: 0 auto 20rpx; padding: 18rpx 0;">送礼 开聊</view>
					</view>
				</view>
				<view style="width: 750rpx;">
					<view class="ml-5 py-3 d-flex d-flex-middle">
						<view class="d-flex d-flex-middle" style="width: 180rpx;">
							<text class="font26 color999">余额:</text>
							<text class="iconfont font26 icon-jinbi-yingbi-huobi-Coin mx-1" style="color: #FFCC00;"></text>
							<text class="font26 color999">{{$store.state.user.availableAmount || 0}}</text>
						</view>
					</view>
					<view class="wrap-bd mb-1">
						<view class="px-4 d-flex d-flex-column d-flex-middle">
							<image :src="PayGiftItem.icon" style="width: 200rpx; height: 200rpx;;"></image>
							<view style="height: 50rpx;">
								<text v-if="payIndex==0||payIndex==1" class="font32 color999">￥{{systemInfo.osName=='ios'? PayGiftItem.iosPrice : PayGiftItem.price}}</text>
								<view v-else class="d-flex d-flex-middle">
									<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%20554.png" style="width: 40rpx; height: 40rpx;"></image>
									<text class="font32 color999">{{systemInfo.osName=='ios'? PayGiftItem.iosCoinPrice : PayGiftItem.androidCoinPrice}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="pb-4">
						<view class="d-flex d-flex-between d-flex-middle px-4 mb-3" @click="changePay(0)">
							<view class="d-flex d-flex-middle">
								<image class="rounded"
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228140259-f541dd69-c75e-43ad-a9e9-7aa92250dc3c.png"
									style="width: 50rpx;height: 50rpx;"></image>
								<text class="ml-1">微信支付</text>
							</view>
							<text class="iconfont icon-xuanzhong font32"
								:class="payIndex == 0?'main-color':'colorhold'"></text>
						</view>
						<view class="d-flex d-flex-between d-flex-middle px-4 mb-3" @click="changePay(1)">
							<view class="d-flex d-flex-middle">
								<image class="rounded"
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228135921-cfaf5d4f-f4f2-4978-988d-5a1c9b0e7b96.png"
									style="width: 50rpx;height: 50rpx;"></image>
								<text class="ml-1">支付宝支付</text>
							</view>
							<text class="iconfont icon-xuanzhong font32"
								:class="payIndex == 1?'main-color':'colorhold'"></text>
						</view>
						<view class="d-flex d-flex-between d-flex-middle px-4 mb-5" @click="changePay(2)">
							<view class="d-flex d-flex-middle">
								<image class="rounded"
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%20554.png"
									style="width: 50rpx;height: 50rpx;"></image>
								<text class="ml-1">嗒币支付</text>
							</view>
							<text class="iconfont icon-xuanzhong font32"
								:class="payIndex == 2?'main-color':'colorhold'"></text>
						</view>
					
						<view class="px-5">
							<view style="height: 70rpx;border-radius: 50rpx;" class="bg-main d-flex d-flex-center d-flex-middle" @click="confirmPay">
								<text class="font30 colorfff">确认支付</text> 
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup @change="changestatus" type="bottom" ref="morePopup" background-color="#fff"
			border-radius="16px 16px 0 0 " style="z-index: 500; height: 300rpx;">
			<view class="popup-content pt-4" v-if="!isShare">
				<view class="d-flex mt-2 d-flex-middle ml-3 mb-4 mt-4" @click="share">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/share1.png"
						mode="heightFix" style="height: 38rpx; width: 38rpx;"></image>
					<text class="font32 ml-2">分享</text>
				</view>
				<view class="d-flex mt-2 d-flex-middle ml-3 mb-4 mt-4" @click="gotoReportPage(morePopupData.id)">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E4%B8%BE%E6%8A%A5.png"
						mode="heightFix" style="height: 35rpx; width: 35rpx;"></image>
					<text class="font32 ml-2">举报</text>
				</view>
			</view>
			<view v-else style="transition: all 0.3s ease;">
				<view class="my-4 text-center">分享到</view>
				<view class="d-flex d-flex-between px-5 mb-4 bot">
					<view class="d-flex-column d-flex-middle" @click="OnShare(1)">
						<image class="rounded"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1.png"
							mode="widthFix" style="width: 60rpx; height: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">微信</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(2)">
						<image class="rounded"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E6%9C%8B%E5%8F%8B%E5%9C%88.png"
							mode="widthFix" style="width: 60rpx; height: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">朋友圈</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(3)">
						<image class="rounded"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/QQ.png" mode="widthFix"
							style="width: 60rpx; height: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">QQ好友</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(4)">
						<image class="rounded"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/qq%E7%A9%BA%E9%97%B4.png"
							mode="widthFix" style="width: 60rpx; height: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">QQ空间</view>
					</view>
					<view class="d-flex-column d-flex-middle" @click="OnShare(5)">
						<image class="rounded"
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png" mode="widthFix"
							style="width: 60rpx; height: 60rpx;"></image>
						<view class="mt-1 font24" style="color: #585858;">小嗒好友</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="moneyPopup" type="dialog" style="position: relative;z-index: 999999;">
			<uni-popup-dialog cancelText="取消" confirmText="去充值" title="提示" content="当前礼物数量不足，购买后才可以继续送礼，是否去购买？"
				@confirm="confirmMoney" @close="colseMoneyPopup"></uni-popup-dialog>
		</uni-popup>
	</z-paging>
</template>

<script>
	import store from '@/store/index.js';
	import appUpdate from '@/js_sdk/wczd-app-update/js_sdk/app-update.js'
	import { PayApi } from '../../http/PayApi';
	import { TaskApi } from '../../http/taskApi';
	import { goodsApi } from '../../http/goodsApi';
	import { userApi } from '../../http/userApi';
	import { DaziApi } from '../../http/Dazi';
	import { giftApi } from '../../http/giftApi';
	import { FirstChangeApi } from '../../http/firstChange';
	import {dateUtils} from '@/util/util.js';
	export default {
		data() {
			return {
				title: 'wukang',
				current: 0,
				bgcolor: '#c2edf4',
				firstChangeDisplay: 'none',
				gameindex: 0,
				firstChangeIndex: 0,
				DicX: 0,
				type: 1,
				RealDescList: [],
				ShowPublishTips: false,
				RealDescDisplay: false,
				isRequesting: false,
				avatarList: [],
				series: [60, 60, 80, 70, 90],
				itemList: [],
				PayGiftItem: {},
				shareData: {
					href: "https://www.168802.xyz",
					title: "小嗒组队分享",
					summary: null,
					imageUrl: null
				},
				isDayida: false,
				cardList: [], //游戏卡片
				swiperHeight: 760,
				currentIndex: 0,
				total: 0,
				chartData: {},
				gamesParam: {
					pageIndex: 1,
					pageSize: 14,
				},
				dayidaData: [],
				dayidaGiftList: [],
				interval: 4000,
				gameListParam: '', //游戏卡片参数,
				gameListPageIndex: 1,
				gameListPageSize: 5,
				// uniqueCanvasId:'',
				city: '武汉市',
				citys: '',
				latitude: '',
				longitude: '',
				images: [],
				payIndex: 0,
				systemInfo: uni.getSystemInfoSync(),
				morePopupData: {},
				cardLoading: true,
				isShare: false,
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
					padding: [0, 0, 0, 0],
					dataLabel: false,
					enableScroll: false,

					width: 100,
					height: 100,
					fontSize: 10,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25,
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#cccccc",
							gridCount: 3,
							opacity: .6,
							max: 10,
							fontSize: 12,
							labelShow: true,
							border: false,
						},
					}
				},
				PayMount: 12,
				isagree: false,
				isPurchase: false,
				PayList: [{
						id: 3,
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241115141319.png',
						name: '支付宝',
						desc: '推荐',
						value: 'Alipay',
						checked: true
					},
					{
						id: 2,
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/Pay-Wechat.png',
						name: '微信',
						desc: '',
						value: 'Wechat',
						checked: false
					}
				],
				RechargeRewards: [],
				CouponsNum: 1,
				payMethod: 3,
				payType: 2,
				orderStr: null,
				WxpayParams: {},
				isFirstLoad: true, //是否是第一次加载
				showRechargeRewards: false,
				winWidth: 0,
				winHeigh: 0,
				visible: 5,
				/*记录x y轴*/
				x: {
					start: 0,
					move: 0,
					end: 0
				},
				y: {
					start: 0,
					move: 0,
					end: 0
				},
				/*下标*/
				cardCurrentIndex: 0,
				/*滑动*/
				swipering: false,
				/*滑动中*/
				slideing: false,
				direction: '',
				animationData: {},
				isSubmitting: false
			}
		},
		// onPullDownRefresh() {
		// 	this.avatarList = [];
		// 	this.cardList = [];
		// 	this.getGamesDate();
		// 	this.cardLoading=true;
		// 	// 生成随机索引
		// 	this.current = Math.floor(Math.random() * 4);
		// 	console.log('随机索引:', this.current);

		// 	// 重新加载并随机排序数据
		// 	this.getList().then(() => {
		// 		setTimeout(() => {
		// 			uni.stopPullDownRefresh();
		// 		}, 1500);
		// 	});
		// },
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#c2edf4'
			} else {
				this.bgcolor = 'transparent'
			}
		},
		onShow() {
			this.IsShowPublishTips()
			const game = uni.getStorageSync('game');
			const gameList = uni.getStorageSync('oftenUseGameList');
			if (this.isFirstLoad || game || gameList) {
				this.avatarList = [];
				this.needRefreshList = false; // 初始化标志位
				// getGamesDate key值存在代表是否改变了列表
				this.getGamesDate(game).then(() => {
					if (game) {
						let index = this.avatarList.findIndex(item => item.id === game.id);
						if (index !== -1) {
							console.log('找到了：',index);
							// 如果包含这个游戏，设置参数并查询数据
							this.gameindex = index;
							uni.removeStorageSync('game');
							this.gameListParam = game.id;
						} else {
							this.avatarList[this.avatarList.length-1] = game
							this.gameindex = this.avatarList.length-1
							this.gameListParam = game.id;
							uni.removeStorageSync('game');
						}
						// 触发加载z-paging列表
						this.$refs.paging.reload();
					}
				});
			}
		},
		onLoad() {
			this.loadInitialData().finally(() => {
				this.isFirstLoad = false;
			});
			let that = this
			 // 改变逻辑，通过当前接口返回true和false，显示是否首充，展示
			 // that.GetResourceId().then(resoult => {
			 // 		if(!resoult) {
			 // 			that.GetChangeData()
			 // 		}
			 // })
			
			// 通过接口查资源ID，然后通过查询到的资源ID查订单，有订单就说明首充过，不给展示
			// that.GetResourceId().then(resoult => {
			// 	that.QueryFirstChangeOrder(resoult).then(Num => {
			// 		if(!Num) {
			// 			that.GetChangeData()
			// 		}
			// 	})
			// })
			setTimeout(() => {
				that.setSwiperHeight();
			}, 1000);
			// #ifdef APP
			setTimeout(() => {
				if (that.$store.state.loginStatus) {
					that.appVersion()
				}
			}, 2000)
			// #endif
		},
		mounted() {
			const res = uni.getSystemInfoSync()
			this.winWidth = res.windowWidth
			let windowHeight = res.windowHeight
			let element = "#header";
			const query = uni.createSelectorQuery().in(this);
			query.select(element)
				.boundingClientRect()
				.exec((res) => {
					if (res && res[0]) {
						this.winHeigh = windowHeight - res[0].height
					}
				});
		},
		methods: {
			// -------------------------------
			cardTransform(item, index) {
				let css = {
					'zIndex': this.cardList.length - index,
					'opacity': this.cardCurrentIndex + this.visible - 1 >= index && this.cardCurrentIndex <=
						index ? 1 : 0,
					'transform': 'rotate(' + ((item.x || 0) / 30) + 'deg) translate3d(' + (item.x || 0) +
						'px,' + (item.y || 0) + 'px, ' + (this.cardCurrentIndex - index) * 50 + 'px)'
				};
				// css.transform += this.currentIndex && this.currentIndex === index ? `rotate(0,${this.direction === 'left' ? '-10':'10'}deg)` : ''
				if (index === this.cardCurrentIndex) {
					if (this.slideing) {
						css["transitionDuration"] = `${!this.swipering ? 1000 : 0}ms`;
					} else {
						css["transitionDuration"] = `${!this.swipering ? 300 : 0}ms`;
					}
				}
				return css
			},
			touchStart(e, index) {
				// if (this.slideing || this.cardList.length - 1 == this.cardCurrentIndex) {
				// 	return
				// };
				if (typeof this.cardList[index].x === 'undefined' && typeof this.cardList[index].y ===
					'undefined') {
					this.$set(this.cardList[index], 'y', 0)
					this.$set(this.cardList[index], 'x', 0)
				}
				this.swipering = true;
				this.x.start = Number.parseInt(e.touches[0].pageX);
				// this.y.start = Number.parseInt(e.touches[0].pageY);
				console.log("开始绘制")
			},
			touchMove(e, index) {
				// if (this.slideing || this.cardList.length - 1 == this.cardCurrentIndex) {
				// 	return
				// }
				this.x.move = Number.parseInt(e.touches[0].pageX);
				// this.y.move = Number.parseInt(e.touches[0].pageY);

				let move = this.x.move - this.x.start
				this.cardList[index].x = Math.abs(move) > 30 ? move : 0 //防抖处理                   
				this.cardList[index].y = this.y.move - this.y.start
			},
			touchEnd(index) {
				// if (this.slideing || this.cardList.length == this.cardCurrentIndex) {
				// 	return;
				// }
				this.swipering = false;
				if ( this.cardList[index].x > 0 && this.cardList[index].x > this.winWidth / 2 - this.winWidth / 5 ) {
					this.touchEndNext(index);
				} else if ( this.cardList[index].x < 0 && this.cardList[index].x < -this.winWidth / 2 + this.winWidth / 5 ) {
					this.touchEndNext(index);
				} else {
					this.cardList[index].x = 0;
					this.cardList[index].y = 0;
					this.slideing = false;
				}
			},
			touchEndNext(index) {
				this.slideing = true;
				this.cardList[index].x = this.cardList[index].x * 5;
				this.cardList[index].y = this.cardList[index].y * 5;
				this.touchEndDone()
			},
			touchEndDone() {
				return new Promise((resolve) => {
					setTimeout(() => {
						this.slideing = false
						this.cardCurrentIndex++
						this.x.move = 0
						this.y.move = 0
						this.slideing = false
						console.log(this.cardCurrentIndex, this.cardList.length-3);
						if(this.cardCurrentIndex >= this.cardList.length-3) {
							console.log('加载更多数据...');
							this.gameListPageIndex++
							this.queryMore()
						}
						resolve()
					}, 350);
				})
			},
			// -------------------------------
			
			/* 绘制雷达图 */
			drawRadarChart() {
				console.log('开始绘制'+ this.cardList.length +'张雷达图');
				if(!this.cardList.length) return
				for (let i=0; i<this.cardList.length; i++) {
					const timestamp = Date.now();
					const ctx = uni.createCanvasContext('radarCanvas'+i);
					const width = 22;
					const height = 22;
					const centerX = 60;
					const centerY = 68;
					let data = []
					data = data.concat(this.cardList[i].extra.split(","));
					data.forEach((item, idx) => {
						if(item >= 100) {
							data[idx] = '100'
						}
					})
					const labels = ["素质", "情绪", "技术", "热情", "综合"];
					const colors = ['#cacaca', '#cacaca', '#D6D6D6', '#E6E6E6', '#F6F6F6'];
					const maxScore = 100;
					const angleStep = (2 * Math.PI) / labels.length;
					ctx.setLineWidth(1);
					ctx.setStrokeStyle('#F6F6F6');
					ctx.beginPath();
					ctx.arc(centerX, centerY, width, 0, 2 * Math.PI);
					ctx.setFillStyle('#F6F6F6');
					ctx.closePath();
					ctx.fill();
					for (let i = 5; i > 0; i--) {
						ctx.setStrokeStyle(colors[3]);
						ctx.beginPath();
						labels.forEach((label, index) => {
							const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
							const y = centerY + (height / 5) * i * Math.sin(angleStep * index - Math.PI / 2);
							if (index === 0) {
								ctx.moveTo(x, y);
							} else {
								ctx.lineTo(x, y);
							}
						});
						ctx.closePath();
						ctx.fill();
						ctx.stroke();
					}
					ctx.setStrokeStyle('rgba(194, 237, 244,1)');
					ctx.setFillStyle('rgba(204, 239, 244, 1)');
					ctx.setLineWidth(2);
					ctx.beginPath();
					data.forEach((score, index) => {
						const x = centerX + (width * (score / maxScore)) * Math.cos(angleStep * index - Math.PI / 2);
						const y = centerY + (height * (score / maxScore)) * Math.sin(angleStep * index - Math.PI / 2);
						if (index === 0) {
							ctx.moveTo(x, y);
						} else {
							ctx.lineTo(x, y);
						}
					});
					ctx.closePath();
					ctx.fill();
					ctx.stroke();
					ctx.setTextAlign('center');
					labels.forEach((label, index) => {
						const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
						const y = centerY + (height + 26) * Math.sin(angleStep * index - Math.PI / 2);
						ctx.setFillStyle('#000');
						ctx.setFontSize(10);
						ctx.font = '10px sans-serif'
						ctx.fillText(label, x, y);
					});
					ctx.draw();
				}
			},
			/* 绘制雷达图end */ 
			async queryList(pageNo, pageSize) {
				let params = {
					pageIndex: this.gameListPageIndex,
					pageSize: this.gameListPageSize,
					filterQueriedFlag: 1
				}
				if(this.gameListParam) {
					params.gameId = this.gameListParam
				}
				let res = await DaziApi.queryCard(params);
				this.$refs.paging.complete(res.records).then(() => {
					this.$nextTick(() => {
						setTimeout(() => {
							this.drawRadarChart()
						}, 2000);
					});
				})
			},
			async queryMore() {
				let params = {
					pageIndex: this.gameListPageIndex,
					pageSize: this.gameListPageSize,
					filterQueriedFlag: 1
				}
				if(this.gameListParam) {
					params.gameId = this.gameListParam
				}
				let res = await DaziApi.queryCard(params);
				res.records = [...this.cardList, ...res.records]
				this.$refs.paging.complete(res.records).then(() => {
					this.$nextTick(() => {
						setTimeout(() => {
							this.drawRadarChart()
							this.setSwiperHeight();
						}, 300);
					});
				});
			},
			// 加载初始数据
			async loadInitialData() {
				await this.getGamesDate();
			},
			share() {
				this.isShare = true
			},
			async getTaskList(taskid) {
				let params = {
					id: taskid
				}
				let res = await TaskApi.getTaskList(params)
				if(res.records[0].finishFlag) return
				if(!res.records[0].receiveFlag) {
					this.receiveTask(taskid).then(() => {
						this.finishTask(taskid);
					})
				} else {
					this.finishTask(taskid);
				}
			},
			async receiveTask(id) {
				let params = {
					taskId: id
				}
				let res = await TaskApi.ReceiveTask(params)
				console.log('领取完成！');
			},
			async finishTask(id) {
				let params = {
					taskId: id
				}
				let res = await TaskApi.FinishTask(params);
				console.log('任务完成！');
			},
			ChangePayOpt(dex) {
				this.PayList[dex].checked = true;
				this.payMethod = this.PayList[dex].id
				if (this.payMethod === 3) {
					this.payType = 2
				}
				if (this.payMethod === 2) {
					this.payType = 2
				}
				// 将其他选项设置为未选中
				this.PayList.forEach((i, index) => {
					if (dex !== index) {
						this.PayList[index].checked = false;
					}
				});
			},
			appVersion() {
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					userApi.version().then((res) => {
						if (widgetInfo.version != res.versionCode) {
							if (uni.getSystemInfoSync().platform === 'android') {
								appUpdate({
									"platform": "android",
									"updateContent": "新版本已经准备好了，请更新...",
									"downUrl": res.apkUrl,
									"version": res.versionCode,
									"force": res.isForce,
									"mainColor": "FF5B78",
								})
							}
						} else {
							console.log('app最新版本---')
						}
					})
				});
			},
			// 分享
			OnShare(type) {
				let that = this
				if (type === 1 || type === 2) {
					uni.share({
						provider: "weixin",
						scene: type === 1 ? 'WXSceneSession' : 'WXSceneTimeline',
						type: 0,
						href: that.shareData.href,
						title: that.shareData.title,
						summary: that.shareData.summary,
						imageUrl: that.shareData.imageUrl? that.shareData.imageUrl : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
							that.getTaskList(21);
						},
						fail: function(err) {
							let failData = JSON.parse(JSON.stringify(err))
							console.log(failData);
							if(failData.code == -8) {
								uni.showToast({
									title: '客户端未安装',
									icon: 'none',
									duration: 1500
								})
							} else if(failData.code == -100) {
								console.log('客户端安装了，但是没有登录，用户返回后的状态');
							} else {
								uni.showToast({
									title: failData,
									icon: 'none',
									duration: 1500
								})
							}
						}
					});
					that.$refs.morePopup.close()
					that.isShare = false
					setTimeout(() => {
						uni.showTabBar()
					}, 250)
				}
				if (type === 3 || type === 4) {
					uni.share({
						provider: "qq",
						scene: type === 3 ? 'WPA' : 'QZONE',
						type: 0,
						href: that.shareData.href,
						title: that.shareData.title,
						summary: that.shareData.summary,
						imageUrl: that.shareData.imageUrl? that.shareData.imageUrl : 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/logo.png',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
							that.getTaskList(21);
						},
						fail: function(err) {
							let failData = JSON.parse(JSON.stringify(err))
							if(failData.code == -2) {
								return
							}
							uni.showToast({
								title: failData,
								icon: 'none',
								duration: 1500
							})
						}
					});
					that.$refs.morePopup.close()
					that.isShare = false
					setTimeout(() => {
						uni.showTabBar()
					}, 250)
				}
				if (type === 5) {
					uni.showToast({
						title: '此功能暂未开发！',
						icon: 'none',
					})
					that.$refs.morePopup.close()
					that.isShare = false
					setTimeout(() => {
						uni.showTabBar()
					}, 250)
				}
			},
			async addRecords(param) { //创建搭一搭记录
				let res = await DaziApi.addRecord(param);
				if (!res) {
					console.log("搭一搭成功");
					uni.showToast({
						title: '搭一搭成功',
						icon: 'none', // 使用'none'图标，只显示文字
						duration: 1000 // 显示持续时间
					});
				}
			},
			goCommand() {
				this.changGame(999, 0)
			},
			changeChangeIndex(ctype) {
				this.firstChangeIndex = ctype
				// this.GetChangeData()
			},
			OpenpurchasePopup(item) {
				this.$refs.purchasePopup.open('bottom')
			},
			confirm() {
				this.OpenpurchasePopup()
			},
			// 关闭首充弹窗
			closeFirstChangePopup() {
				this.firstChangeDisplay = 'none'
			},
			// 首充
			purchase() {
				let params = {
					id: this.RechargeRewards.coinPackageVo.id,
					sourceType: null
				}
				// 获取设备类型
				params.sourceType = this.systemInfo.osName === 'ios' ? 2 : 1

				this.CreateOrder(params)
				// this.isPurchase = true
			},
			// 创建订单
			async CreateOrder(params) {
				let res = await PayApi.DabiPackage(params);
				this.Pay(res.orderNo)
			},
			// async QueryFirstChangeOrder(idList) {
			// 	let params = {
			// 		pageIndex: 1,
			// 		pageSize: 1,
			// 		resourceType: 3,
			// 		resourceIdList: idList,
			// 		createUid: this.$store.state.user.uid
			// 	}
			// 	let res = await FirstChangeApi.queryOrder(params);
			// 	console.log(res);
			// 	return res.records.length
			// },
			// 支付
			async Pay(orderNo) {
				let params = {
					orderNo: orderNo,
					payMethod: this.payMethod,
					payType: this.payType
				}

				const res = await PayApi.Pay(params)

				// 支付宝支付
				if (this.payMethod === 3) {
					this.orderStr = res.params.orderStr
					this.payByAlipay()
					return
				}
				// 微信支付
				if (this.payMethod === 2) {
					this.WxpayParams = {}
					this.WxpayParams = res.params
					this.payByWxpay();
					return
				}
				if (params.payType == 1) {
					if (res.paySuccess) {
						uni.showToast({
							title: '购买成功',
							icon: 'none',
							position: 'bottom',
							duration: 1500
						});
					}
					this.$refs.purchasePopup.close()
				}
			},
			// 微信支付
			payByWxpay(type) {
				uni.requestPayment({
					"provider": "wxpay", // 微信支付
					"orderInfo": {
						"appid": this.WxpayParams.appid,
						"timestamp": this.WxpayParams.timestamp,
						"noncestr": this.WxpayParams.noncestr,
						"package": "Sign=WXPay",
						"partnerid": this.WxpayParams.partnerId,
						"prepayid": this.WxpayParams.prepayId,
						"sign": this.WxpayParams.sign
					},
					success: (res) => {
						// 支付成功的处理逻辑
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							position: 'bottom',
							duration: 1500
						});
						if(type && type == 'SendGift') {
							console.log('这是购买礼物');
						} else {
							this.$refs.purchasePopup.close()
							uni.showModal({
								title: '小嗒提醒您',
								content: '您有' + this.CouponsNum + '张宝盒券，是否需要跳转至抽奖区？',
								success: function(res) {
									console.log(res);
									if (res.confirm) {
										uni.navigateTo({
											url: '/pagesApp/raffle/raffle'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					},
					fail: (err) => {
						console.log('支付失败，错误信息：', err);
						if (err.errCode === 'xxx') {
							// 可以根据不同的 errCode 进行不同的处理，这里的 xxx 是具体的错误码，例如用户取消支付的错误码
							console.log('用户取消支付');
						} else if (err.errCode === 'yyy') {
							// 另一种错误码 yyy 的处理
							console.log('签名错误，请联系客服');
						} else {
							console.log('其他支付错误，请重试或联系客服');
						}
						uni.showToast({
							title: '支付失败',
							icon: 'none',
							position: 'bottom',
							duration: 2000
						});
						if(type && type == 'SendGift') {
							this.DicX = -750
						} else {
							this.$refs.purchasePopup.close()
						}
					}
				});
			},
			// 支付宝支付
			payByAlipay(type) {
				const orderStr = this.orderStr;
				if (!orderStr) {
					console.error('订单字符串为空，无法进行支付');
					return;
				}
				// 调用 uni.requestPayment 方法
				uni.requestPayment({
					provider: 'alipay', // 指定支付提供商为支付宝
					orderInfo: orderStr, // 订单信息
					success: (res) => {
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							position: 'bottom',
							duration: 1000 // 显示持续时间
						});
						if(type && type == 'SendGift') {
							console.log('这是购买礼物');
						} else {
							this.$refs.purchasePopup.close()
							uni.showModal({
								title: '小嗒提醒您',
								content: '您有' + this.CouponsNum + '张宝盒券，是否需要跳转至抽奖区？',
								success: function(res) {
									console.log(res);
									if (res.confirm) {
										uni.navigateTo({
											url: '/pagesApp/raffle/raffle'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					},
					fail: (err) => {
						console.error('支付失败:', err);
						uni.showToast({
							title: '支付失败',
							icon: 'none',
							position: 'bottom',
							duration: 1000 // 显示持续时间
						});
						if(type && type == 'SendGift') {
							this.DicX = -750
						} else {
							this.$refs.purchasePopup.close()
						}
					}
				});
			},
			async IsShowPublishTips() {
				let params = {
					pageIndex: 1,
					pageSize: 1,
					uid: this.$store.state.user.uid || '',
					status: 1
				}
				let res = await DaziApi.queryCard(params);
				this.ShowPublishTips =  res.records.length? false : true
			},
			ClosePublishTips() {
				this.ShowPublishTips = false
			},
			// 获取首充数据
			// async GetChangeData() {
			// 	let params = {
			// 		type: 1,
			// 		state: 1
			// 	}
			// 	let res = await FirstChangeApi.GetFirstChangeData(params);
			// 	this.firstChangeDisplay = 'block';
			// 	this.RechargeRewards = res.firstRechargeRewardVoList[this.firstChangeIndex]
			// 	this.RechargeRewards.rewardList.forEach(i => {
			// 		if (i.rewardType === 4) {
			// 			this.CouponsNum = i.rewardCount
			// 		}
			// 	})
			// 	this.PayMount = this.RechargeRewards.coinPackageVo.price
			// 	this.RealDescList = res.description.split("<br/>");
			// 	this.showRechargeRewards = true
			// },
			async GetResourceId() {
				let params = {
					type: 1,
					state: 1
				}
				let res = await FirstChangeApi.GetFirstPopupData(params);
				console.log(res,'判断首充数据接口2')
				return res
				// let IdList = ""
				// res.firstRechargeRewardVoList.forEach((item, idx) => {
				// 	if(idx == 0) {
				// 		IdList = IdList + item.coinPackageVo.id
				// 	} else {
				// 		IdList = IdList + ',' + item.coinPackageVo.id
				// 	}
				// })
				// return IdList
			},
			openRealDesc() {
				this.RealDescDisplay = true
			},
			closeRealDesc() {
				this.RealDescDisplay = false
			},
			async putPosition(param) {
				let res = await userApi.putPosition(param);
			},
			async getCounts(param) { //查询游戏
				let res = await goodsApi.queryCounts(param);
				console.log(res);
			},
			previwImage(dex, index) {
				console.log(this.cardList[dex]);
				if (this.cardList[dex].screenshot1) {
					this.images.push(this.cardList[dex].screenshot1)
				}
				if (this.cardList[dex].screenshot2) {
					this.images.push(this.cardList[dex].screenshot2)
				}
				if (this.cardList[dex].screenshot3) {
					this.images.push(this.cardList[dex].screenshot3)
				}
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: this.images, // 需要预览的图片http链接列表
				});
				this.images = []
			},
			
			async getDazi() { //查询自己发布的搭子卡
				let name = this.avatarList[this.gameindex].name;
				let id = this.avatarList[this.gameindex].id;
				let icon = this.avatarList[this.gameindex].icon;
				let param = {
					pageIndex: 1,
					pageSize: 10,
					uid: this.$store.state.user.uid,
					gameId:id,
				}
				let res = await DaziApi.queryCard(param);
				let records = res.records;
				if (records.length == 0) {
					uni.navigateTo({
						url: `/pagesMain/edite-card/edite-card?id=${id}&name=${encodeURIComponent(name)}&icon=${encodeURIComponent(icon)}`
					})
				}
				let foundItem = null;
				const hasGame = records.some(i => {
					if (i.gameId === id) {
						foundItem = i; // 保存找到的元素
						return true; // 找到符合条件的元素，返回true
					}
					return false;
				});
				

				if (hasGame) {
					console.log('有这个搭子卡');
					uni.navigateTo({
						url: `/pagesApp/edit/edit?id=${foundItem.id}&gameId=${foundItem.gameId}`
					});
				} else {
					console.log('没有这个搭子卡');
					uni.navigateTo({
						url: `/pagesMain/edite-card/edite-card?id=${id}&name=${encodeURIComponent(name)}&icon=${encodeURIComponent(icon)}`
					});
				}
			},
			changestatus(e) { //显示tabbar
				if (!e.show) {
					setTimeout(() => {
						uni.showTabBar()
						this.isShare = false
					}, 250)
				}
			},
			async getGamesDate(isItCached) {
				console.log(this.gameindex);
				const cacheKey = 'api_data_cache';
				  // 1. 先尝试读取缓存
				  const cachedData = await dateUtils.getCacheWithExpire(cacheKey);
				  
				  if (cachedData && !isItCached) {
				    console.log('使用缓存数据',cachedData);
					this.avatarList = cachedData
				  }
				// 
				  // 2. 无缓存或过期则请求 API
				  try {
					let res = await goodsApi.queryGamesList(this.gamesParam);
					let newData2= res.records;
					// 匹配页面缓存使用
					dateUtils.setCacheWithExpire('api_data_cache2', newData2, 1);
					let newData = res.records.slice(0, 6);
					// setTimeout(() => {
					newData.forEach(i => {
						if (this.avatarList.length == 6) {
							return
						}
						this.avatarList.push(i)
					})
					// },500)
				    // 存储新数据（缓存 1 天）
				    dateUtils.setCacheWithExpire(cacheKey, this.avatarList, 1);
				  } catch (error) {
				    console.error('API请求失败:', error);
				    // throw error;
				  }
			
				if (!this.gameListParam) { //有值的话先把默认id给了
					this.gameListParam = this.avatarList[0].id
					// 触发加载z-paging列表
					this.$refs.paging.reload();
				}
			},
			async getList() {
				let res = await goodsApi.queryList(this.gameListParam);
				res.records.forEach(i => {
					this.cardList.push(i)
				})
				//  let records = this.shuffleArray([...res.records]);
				// this.cardList = records;
				// console.log(this.cardList);
				// 更新图表数据
			},
			async concernData(uid) { //关注
				let param = {
					bindFlag: true,
					fromUid: this.$store.state.user.uid,
					toUid: uid,
					type: 2
				}
				if (param.fromUid == param.toUid) {
					return
				}
				let res = await userApi.relation(param);
				this.addFriend(uid);
				this.getTaskList(19);
			},
			concern(uid, concernflag, index) { //关注用户
				if (this.checkRealNaem()) {
					if (!concernflag) {
						this.concernData(uid);
						uni.showToast({
							title: '关注成功',
							icon: 'none', // 使用'none'图标，只显示文字
							duration: 1000 // 显示持续时间
						});
						console.log(this.cardList[index]);
						this.cardList[index].concernFlag = true;
					}
				} else {
					uni.showModal({
						content: '你还没有完成实名认证，请先完成实名认证？',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pagesApp/RealName/RealName`
								});
							}
						}
					});
				}
			},
			checkRealNaem() { //判断是否实名
				// if (this.$store.state.user.realName == '' || this.$store.state.user.realName == null) {
				// 	return false
				// } else {
				// 	return true
				// }
				return true
			},
			async GetSendGiftList() {
				let params = {
					pageIndex: 1,
					pageSize: 8
				}
				let res = await giftApi.sendGiftList(params)
				let selectIdx = null
				this.dayidaGiftList.forEach((item, idx) => {
					if(item.selected) {
						selectIdx = idx
					}
				})
				this.dayidaGiftList = []
				this.dayidaGiftList = res.records
				if(selectIdx >=0 ) {
					this.dayidaGiftList[selectIdx].selected = true
				}
				console.log(this.dayidaGiftList);
			},
			async HasSameDaziCard(gameId) {
				let flag = false
				let res = await DaziApi.queryCard({
					uid: store.state.user.uid,
					status: 1
				})
				res.records.forEach(item => {
					if(item.gameId == gameId) {
						flag = true
						return
					}
				})
				return flag
			},
			// 0,微信支付，1支付宝, 2嗒币
			changePay(iii) {
				this.payIndex = iii
			},
			async createGiftOrder(params) {
				let res = await PayApi.BuyGifts(params);
				return res.orderNo
			},
			confirmPay() {
				if (this.isRequesting) {
					console.log("请求已在处理中，5秒内不再重复发送请求。");
					return;
				}
				let params = {
					count: 1,
					id: this.PayGiftItem.id,
					sourceType: this.systemInfo.osName === 'ios' ? 2 : 1
				}
				this.isRequesting = true
			
				this.createGiftOrder(params).then((resolve) => {
					let PayParams = {
						orderNo: resolve,
						payMethod: this.payIndex == 0 ? 2 : this.payIndex == 1 ? 3 : 1, //0-wx,1-zfb，2-余额
						payType: this.payIndex == 2 ? 1 : 2
					}
					this.createPay(PayParams);
				});
				setTimeout(() => {
					this.isRequesting = false;
				}, 5000);
			},
			// 支付单
			async createPay(PayParams) {
				let res = await PayApi.Pay(PayParams);
				// 支付宝支付
				if (PayParams.payMethod === 3) {
					this.orderStr = res.params.orderStr
					console.log('支付宝支付');
					this.payByAlipay('SendGift');
					return
				}
				// 微信支付
				if (PayParams.payMethod === 2) {
					this.WxpayParams = {}
					this.WxpayParams = res.params
					console.log('微信支付');
					this.payByWxpay('SendGift');
					return
				}
				// 嗒币支付
				if (PayParams.payMethod === 1) {
					this.DicX = -750
					if (res.paySuccess) {
						uni.showToast({
							title: '购买成功',
							icon: 'none',
							duration: 1500
						});
						uni.showLoading({
							icon: 'none',
							title: '加载中...'
						})
						setTimeout(() => {
							this.GetSendGiftList().then(() => {
								this.GiveDayidaGift()
								uni.hideLoading()
							})
						}, 8000)
					}
				}
			},
			// 嗒一嗒增出礼物
			GiveDayidaGift() {
				let selectIdx = null
				this.dayidaGiftList.forEach((i, idx) => {
					if(i.selected) {
						selectIdx = idx
					}
				})
				console.log(selectIdx);
				if(selectIdx >= 0 && selectIdx != null) {
					this.dayidaGiftList.forEach((item, idx) => {
						if(item.selected) {
							if(item.count > 0) {
								let message = this.$tim.createCustomMessage({
									to: this.dayidaData.uid,
									conversationType: 'C2C',
									payload: {
										data: 'GIFT',
										description: '送给' + this.dayidaData.nickname + ' ' + item.name,
										extension: JSON.stringify(item)
									}
								})
								this.$tim.sendMessage(message);
								let params = {
									toUid: this.dayidaData.uid,
									giftId: item.id
								}
								this.sendGift(params)
							} else {
								this.$refs.moneyPopup.open()
								this.PayGiftItem = item
							}
						}
					})
					// this.closedayidaPopup()
				} else {
					uni.showToast({
						title: '请选择一个小礼物吧！',
					 	icon: 'none',
						position: 'bottom',
					 	duration: 1500
					})
				}
			},
			async sendGift(params) {
				try {
					await giftApi.sendGift({
						'toUid': params.toUid,
						'giftId': params.giftId
					})
					this.closedayidaPopup()
					this.getTaskList(18);
					uni.showToast({
						title: '礼物成功送出！',
						icon: 'none',
						position: 'bottom',
						duration: 2000
					})
					setTimeout(() => {
						this.toim()
						console.log(this.cardList);
						console.log(this.dayidaData);
						this.cardList.forEach((item, idx) => {
							if(item.id == this.dayidaData.id) {
								this.cardList.splice(idx, 1);
							}
						})
					}, 1500)
				} catch (error) {
					console.log('接口请求出错', error);
					uni.showToast({
						title: '礼物赠送失败！',
						icon: 'none',
						position: 'bottom',
						duration: 1500
					})
				}
			},
			// 跳转到聊天页面
			toim(){
				if(this.checkRealNaem()){
					const item = {
						uid: this.dayidaData.id,
						userUid: this.dayidaData.uid,
						name: this.dayidaData.nickname,
						avatar: this.dayidaData.avatar,
						conversationID:'C2C'+this.dayidaData.uid,
						type:'C2C'
					}	
					uni.navigateTo({
						url:'/message/im/im?to='+  encodeURIComponent(JSON.stringify(item))
					});
				}else{
					uni.showModal({
						content: '你还没有完成实名认证，请先完成实名认证？',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {  
								uni.navigateTo({
									url: `/pagesApp/RealName/RealName`
								});
							}
						}
					});			
				}
			},
			confirmMoney() {
				this.$refs.moneyPopup.close()
				this.DicX = -1500
			},
			colseMoneyPopup() {
				this.$refs.moneyPopup.close()
			},
			// 嗒一嗒数量
			async GetAllDaziInfo() {
				let res = await DaziApi.AllDaziInfo()
				return res.length
			},
			// 搭一搭
			toda(id, index) { 
				if (this.checkRealNaem()) {
					this.dayidaData = this.cardList[index]
					this.HasSameDaziCard(this.dayidaData.gameId).then((resolve) => {
						if(resolve) {
							// if(this.dayidaData.daCount > 9) {
							// 	uni.hideTabBar()
							// 	setTimeout(() => {
							// 		this.$refs.dayidaPopup.open('bottom')
							// 		let param = {
							// 			coupleId: id,
							// 			matchType: 1
							// 		}
							// 		this.addRecords(param);
							// 		uni.showToast({
							// 			icon: 'none',
							// 			title: '嗒一嗒成功!',
							// 			duration: 1500
							// 		})
							// 		setTimeout(() => {
							// 			this.isDayida = true
							// 			this.GetSendGiftList()
							// 		}, 350)
							// 	}, 250)
							// } else {
							// 	let param = {
							// 		coupleId: id,
							// 		matchType: 1
							// 	}
							// 	this.addRecords(param);
							// 	uni.showToast({
							// 		icon: 'none',
							// 		title: '嗒一嗒成功!',
							// 		duration: 1500
							// 	})
							// }
							uni.hideTabBar()
							setTimeout(() => {
								this.$refs.dayidaPopup.open('bottom')
								let param = {
									coupleId: id,
									matchType: 1
								}
								this.addRecords(param);
								uni.showToast({
									icon: 'none',
									title: '嗒一嗒成功!',
									duration: 1500
								})
								setTimeout(() => {
									this.isDayida = true
									this.GetSendGiftList()
								}, 350)
								this.getTaskList(17);
							}, 250)
						} else {
							uni.showToast({
								icon: 'none',
								title: '您还没有当前搭子卡!',
								duration: 1500
							})
						}
					})
				} else {
					uni.showModal({
						content: '你还没有完成实名认证，请先完成实名认证？',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pagesApp/RealName/RealName`
								});
							}
						}
					});
				}
			},
			gotomember() {
				uni.navigateTo({
					url: '/pagesMain/member/member'
				})
			},
			// 去聊天
			GoChat() {
				if(this.$store.state.user.accountType == 1) {
					this.DicX = -750
				} else {
					this.closedayidaPopup()
					setTimeout(() => {
						uni.showTabBar()
						this.toim()
					}, 250)
				}
			},
			// 选中嗒一嗒礼物
			selectDayidaGift(dex) {
				if(this.dayidaGiftList[dex].selected) {
					return
				}
				this.dayidaGiftList.forEach(i => {
					i.selected = false
				})
				this.dayidaGiftList[dex].selected = true
			},
			// 关闭嗒一嗒弹窗
			closedayidaPopup() {
				this.$refs.dayidaPopup.close()
				setTimeout(() => {
					uni.showTabBar()
					this.isDayida = false
					this.DicX = 0
					this.dayidaGiftList.forEach(i => {
						i.selected = false
					})
				}, 250)
			},
			// 嗒一嗒弹窗关闭执行逻辑
			dayidachangestatus(e) {
				if (!e.show) {
					setTimeout(() => {
						uni.showTabBar()
						this.isDayida = false
						this.DicX = 0
					}, 250)
				}
			},
			// 更多(弹窗)
			openMorePopup(item) {
				this.morePopupData = item
				this.shareData.summary = item.remark
				this.shareData.imageUrl = item.screenshot1
				uni.hideTabBar()
				this.$refs.morePopup.open('bottom')
			},
			position() {
				uni.navigateTo({
					url: "/pagesMain/position/position"
				})
			},
			gotoSearchPage() {
				uni.navigateTo({
					url: "/pagesMain/Index-SearchPage/Index-SearchPage"
				})
			},
			changeSwiper(e) {
				this.currentIndex = e.detail.current;
				this.$nextTick(() => {
					setTimeout(() => {
						this.setSwiperHeight();
					}, 100);
				});
			},
			getChartData(extra) {
				let series = [60, 60, 80, 70, 90]; // 默认值

				if (extra) {
					try {
						const extraData = extra.split(',').map(num => parseInt(num) || 60);
						if (extraData.length === 5) {
							series = extraData;
						}
					} catch (error) {
						console.error('解析 extra 数据出错：', error);
					}
				}

				return {
					categories: ["素质", "情绪", "技术", "热情", "综合"],
					series: [{
						name: "",
						data: series
					}]
				};
			},
			async changGame(avaIndex, id) {
				try {
					this.type = id;
					this.cardLoading = true;
					this.gameListPageIndex = 1
					this.gameindex = avaIndex;
					this.currentIndex = 0; // 重置卡片索引
					this.cardCurrentIndex = 0; //重置搭子卡索引
					this.cardList = [];

					if (id === 0) {	
						delete this.gameListParam;
					} else {
						this.gameListParam = id;
					}
					if(this.gameindex === 999) {
						this.gameListParam = null
					}
					// 触发加载z-paging列表
					this.$refs.paging.reload().then(() => {
						this.$nextTick(() => {
							setTimeout(() => {
								this.setSwiperHeight();
							}, 300);
						});
					})

					if (avaIndex !== 999) {
						this.getServerData();
					}
				} catch (error) {
					console.error('Error in changGame:', error);
				} finally {
					this.cardLoading = false;
				}
			},

			setSwiperHeight() {

				let element = "#content-wrap" + this.currentIndex;
				const query = uni.createSelectorQuery().in(this);

				return new Promise((resolve) => {
					query.select(element)
						.boundingClientRect()
						.exec((res) => {
							if (res && res[0]) {
								this.swiperHeight = res[0].height;
								resolve(res[0].height);
							}
						});
				});
			},
			// 添加朋友
			addFriend(uid){
				let that = this
				that.$tim.addFriend({
					to: uid,
					source: 'AddSource_Type_App',
					type: 'Add_Type_Both',
				}).then((imResponse) => {
					const { code } = imResponse.data;
					if (code === 30539) {
					} else if (code === 0) {
						console.log('添加好友成功！')
					}
				}).catch((imError) => {
					console.warn('addFriend error:', imError);
				});
			},
			// 点击头像进入个人页
			user(uid) {
				if (uid == this.$store.state.user.uid) {
					uni.switchTab({
						url: `/pages/user/user`
					});
				} else {
					uni.navigateTo({
						url: `/pagesMain/HomePage/HomePage?id=${uid}`
					});
				}
			},
			swiperChange(e) {
				this.current = e.detail.current;
			},
			next() { //右
				uni.navigateTo({
					url: "/pagesMain/moreGames/moreGames?type=1"
				})
			},
			checkRealName() { //判断是否实名
				// if (this.$store.state.user.realName == '' || this.$store.state.user.realName == null) {
				// 	return false
				// } else {
				// 	return true
				// }
				return true
			},
			gotoReportPage() {
				this.$refs.morePopup.close()
				setTimeout(() => {
					uni.showTabBar()
					uni.navigateTo({
						url: "/pagesMain/ReportPage/ReportPage?type=2&idRef=" + this.morePopupData.id + '&uid=' + this.morePopupData.uid
					})
				}, 250)
			},
			getServerData() {
				let res = {
					categories: ["素质", "情绪", "技术", "热情", "综合"],
					series: [{
						name: "",
						data: this.series
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			publish () {
				if(this.isSubmitting) return
				 this.isSubmitting = true
				if (this.checkRealName()) {
					if(this.gameindex == 999) {
						uni.navigateTo({
							url: "/pagesMain/moreGames/moreGames?type=3"
						})
						 this.isSubmitting = false
					} else {
						this.getDazi();
						 this.isSubmitting = false
					}
				} else {
					uni.showModal({
						content: '你还没有完成实名认证，请先完成实名认证？',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pagesApp/RealName/RealName`
								});
							}
						}
					});
					 this.isSubmitting = false
				}
			},
			shuffleArray(array) {
				for (let i = array.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[array[i], array[j]] = [array[j], array[i]];
				}
				return array;
			}
		}
	}
</script>

<style scoped>
	.img1 {
		height: 280rpx;
		width: 100%;
	}

	.loudou {
		color: #cfc3d1;
		font-size: 32rpx;
	}

	.srch {
		height: 60rpx;
		background-color: #ffffff;
		border-radius: 50rpx;
	}

	.morecolor {
		color: #592e68;
	}

	.avatarImg {
		border-style: solid;
		border-width: 6rpx;
		border-color: transparent;
	}

	.avatarImgCur {
		border-color: #e65fd0;
	}

	.i-item-box {
		border-radius: 30rpx;
		padding: 8rpx 15rpx;
		background: #d1f3fd;
		font-size: 22rpx;
		color: #48c3fe;
		margin: 10rpx 10rpx;
		border: solid 1px #4ac5ff;
	}
	
	.dayidaGiftItem {
		background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/dayidagiftBg.png) no-repeat;
		background-size: 100% 100%;
		width: 160rpx;
		height: 190rpx;
	}

	.btn-bg {
		background-image: linear-gradient(to right, #e65fd0, #69adf8);
	}
	
	.dayida-btn-bg {
		background-image: linear-gradient(to right, #d494ef, #fbb19f);
	}

	.fab {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		background-image: linear-gradient(to right, #5faefb, #84f3c9);
		z-index: 10;
		right: calc(40rpx + var(--window-right));
		bottom: calc(60rpx + var(--window-bottom));
	}
	
	.RemindPublish {
		width: 95%;
		height: 100rpx;
		border-radius: 100rpx;
		background: #2eebfc;
	}

	.charts-box {
		width: 120px;
		height: 120px;
	}
	
	.avatar-container {
		width: 90rpx;
		height: 90rpx;
		position: relative;
		/* 新增 */
		border-radius: 50%;
		overflow: visible;
		/* 修改 */
	}

	.user-avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		/* 新增 */
		object-fit: cover;
	}
	
	.showLeft {
	    transform: translateX(375rpx); /* 显示时滑入视口 */
	}
	
	.showRight {
	    transform: translateX(-375rpx); /* 显示时滑入视口 */
	}
	
	.showAixin {
		transform: translateY(50rpx); /* 向下滑动 */
	}

	.avatar-frame {
		position: absolute;
		top: -18rpx;
		/* 向上偏移 */
		left: -16rpx;
		/* 向左偏移 */
		width: 123rpx;
		/* 比头像大 20rpx */
		height: 123rpx;
		/* 比头像大 20rpx */
		z-index: 2;
		/* 调整层级 */
		pointer-events: none;
	}

	/* 确保右侧信息区域正确布局 */
	.flex-grow-1 {
		flex-grow: 1;
		min-width: 0;
		/* 防止文本溢出 */
	}

	/* 首充样式 */
	.firstChangeSty {
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 620rpx;
		height: 1070rpx;
		background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/firstChange.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.z-index-1000 {
		z-index: 1000;
	}

	.w30 {
		width: 30%;
	}

	.currentChange {
		background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0211115733.png);
		background-size: 100% 100%;
	}

	.firstChangeItemSty {
		width: 120rpx;
		height: 150rpx;
		margin-right: 12rpx;
		background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/firstChangeItem.png);
		background-size: 100% 100%;
	}

	.firstChangeItemSty2 {
		width: 140rpx;
		height: 140rpx;
		margin-top: 20rpx;
		margin-right: 12rpx;
		background: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/firstChangeItem.png);
		background-size: 100% 100%;
	}

	.btn {
		margin: 40rpx auto 20rpx;
		text-align: center;
		font-size: 30rpx;
		height: 87rpx;
		line-height: 87rpx;
		border-radius: 50rpx;
	}

	.RealDesc {
		width: 610rpx;
		height: 750rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: linear-gradient(180deg, #ba68fb 0%, #8548f3 40%, #8548f3 69%, #ba68fb 100%);
	}

	.triangle {
		top: 0;
		left: 0;
		width: 30rpx;
		height: 30rpx;
		background-image: url('https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%9B%BE%E7%89%871.png');
		background-size: 100% 100%;
	}

	.PayOptions {
		width: 680rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.PayOptions .option {
		color: #231815;
		font-size: 28rpx;
	}

	.PayOptions .icon {
		margin-right: 26rpx;
	}

	.PayOptions .icon image {
		width: 64rpx;
		height: 64rpx;
	}

	.PurchaseSussessSty {
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 620rpx;
		height: 1070rpx;
		background: url('https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0215095131.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.tab-item {
		display: inline-block;
		padding: 0 5rpx;
		margin-right: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		flex-shrink: 0;
		/* 防止被压缩 */
	}
	
	.active-tab {
		background: #18c3ff;
		border-radius: 30rpx;
		padding: 0 22rpx;
	}

	.tantan-slide {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.tantan-slide-box {
		position: relative;
		width: 95%;
		height: 93%;
		/* perspective: 2100rpx; */
		perspective-origin: 50% -30%;
		transform-style: preserve-3d;
		margin: auto;
	}

	.tantan-slide-box-item {
		transform-style: preserve-3d;
		display: flex;
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		position: absolute;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px) rotate(0deg);
		transition: 300ms;
		color: #fff;
	}

	.tantan-slide-direction {
		width: 100%;
		height: 100%;
	}

	.tantan-slide-box-item.on {
		display: block;
	}
</style>